﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=0.1, minimum-scale=1.0, maximum-scale=2.0, user-scalable=yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>TEST</title>
    <link rel="stylesheet" type="text/css" href="//g.alicdn.com/cloudcallcenter/web-workbench-sdk/1.0.1/main.min.css" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .mini-workbench {
            position: fixed;
            border-radius: 100%;
            height: 50px;
            line-height: 50px;
            width: 50px;
            text-align: center;
            background: #00c1de;
            color: white;
            cursor: pointer;
            bottom: 44px;
            right: 0px;
        }

        .test-call {
            cursor: pointer;
            color: #00c1de;
        }

        #workbench {
            font-size: 14px;
            color: #4F5357;
            position: fixed;
            background: #FFFFFF;
            border: 1px solid #D7D8D9;
            box-shadow: 0 1px 4px 0 rgba(55, 61, 65, 0.14);
            right: 50px;
            transition: all .3s;
        }

        #test {
            position: fixed;
            width: 265px;
            background: #FFFFFF;
            top: 150px;
            right: 400px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div onclick="openWorkbench()" class="mini-workbench">
            云呼
        </div>
        <div id="workbench"></div>
    </div>

    <h1>Hello [[${loginName}]]</h1>
    <p>返回<a href="">home</a>页</p>
    <p>
        Click
        <a th:href="">here</a> to see a customer list.
    </p>

    <hr />

    <p>当前坐席</p>
    @*<div th:if="${loginName} != null">
            <p th:inline="text">坐席登录名: [[${loginName}]]</p>
        </div>*@

    <hr />

    <form th:action="" method="post">
        <input type="submit" value="Sign Out" />
    </form>
    <div>
        <h2 onclick="call()" class="test-call">拨号测试:135012345678</h2>
        <button onClick="applyBreak()">测试小休</button>
        <div id="test"></div>
    </div>
    <script type="text/javascript" src="//g.alicdn.com/cloudcallcenter/SIPml/0.1.9/SIPml-api.js"></script>
    <script type="text/javascript" src="//g.alicdn.com/cloudcallcenter-voip/web-agentbar-sdk/1.1.3/index.js"></script>
    <script type="text/javascript" src="//g.alicdn.com/cloudcallcenter/web-workbench-sdk/1.1.2/workbenchSdk.min.js"></script>
    <script type="text/javascript">
        !(function (win) {

            win.workbench = new win.WorkbenchSdk({
                dom: 'workbench',
                regionId: 'cn-shanghai',
                instanceId: '@ViewBag.InstanceId',
                ajaxPath: '/Ccc/sseApi',
                ajaxMethod: 'post',
                ajaxOtherParams: { instanceId: instanceId, objectId: objectId, objectType: objectType, userId, userId },
                header: true,
                useOpenApiSdk: false,
                header: true,
                onErrorNotify: function (error) {
                    console.warn(error)
                },
                onCallComing: function (aa, bb, cc, dd) {
                    console.log(aa, bb, cc, dd);
                    window.open("https://127.0.0.1:8443/customer/phoneNumber/135012345678")
                },
                onCallDialing: function (aa, bb, cc, dd) {
                    console.log(aa, bb, cc, dd);
                },
                onStatusChange: function (code, lastCode, context) {
                    console.log(code, lastCode, context);
                }
            })
            //面板展示开关
            win.workbenchOpen = true;
            openWorkbench = function () {
                var workbenchWrapper = document.querySelector("#workbench");
                var floater = document.querySelector(".mini-workbench");
                win.workbench.changeVisible(win.workbenchOpen);
                if (!win.workbenchOpen) {
                    workbenchWrapper.style.display = 'none';
                    floater.innerHTML = '云呼';
                } else {
                    workbenchWrapper.style.display = 'block';
                    floater.innerHTML = 'X';
                }
                win.workbenchOpen = !win.workbenchOpen
            }

            call = function () {
                win.workbench.call("135012345678")
            }

            applyBreak = function () {
                var yes = prompt("请输入：小休id-小休名称（请不要输入0-default", "1-wc");
                if (yes) {
                    var id = yes.split("-")[0] || 1;
                    var name = yes.split("-")[1] || 'wc';
                    win.workbench.applyForBreak(id, name);
                }
            }

        })(window)

    </script>
</body>
</html>